<template>
  <div class="h-home">
    <div style="width: 100%;display: flex;justify-content: center">
      <el-pagination
          background
          layout="prev, pager, next,total,sizes"
          :page-size="this.page.size"
          :total="this.total" @size-change="sizeChange" @current-change="currentChange">
      </el-pagination>
    </div>

    <div>

      <div class="h-page">
        <div class="h-item" v-for="item in imageData" :key="item.id">
          <el-image :preview-src-list="srcList" :src="baseUrl+item.name" fit="contain"
                    @click="srcList.push(baseUrl+item.name)" lazy>
          </el-image>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "Home2",
  data() {
    return {
      show: false,
      imageData: [],
      srcList: [],
      page: {
        //pageSize
        size: 20,
        current: 1,
      },
      total: 0,
      baseUrl: "",
    }
  },
  methods: {
    getImage() {
      this.axios.get("/api/tImage", {params: this.page}).then(({data}) => {
        this.imageData = {...data.data['records']};
        this.total = data.data.total;

      });
    },
    getBaseUrl() {
      this.axios.get("/api//tImage/getNewImage").then(({data}) => {
        this.baseUrl = data.data;
        this.getImage()
      });
    },
    currentChange(val) {
      this.page.current = val;
      this.getImage();
    },
    sizeChange(val) {
      this.page.size = val;
      this.getImage();
    },
    select() {
      this.page.current = this.page.current + 1;
      this.getImage();
    }
  },
  mounted() {
    this.getBaseUrl();
  }
}
</script>

<style scoped>
.h-home {
  background-color: white;
}

.h-page {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.h-item {
  width: 200px;
  height: 200px;
}
</style>